<!-- pages/[...slug].vue -->
<template>
    <div class="not-found-container">
        <a-result status="404" title="404" :subtitle="`您访问的路径 '${currentPath}' 不存在`">
            <template #extra>
                <a-space>
                    <a-button type="primary" @click="goHome" size="large">
                        <template #icon>
                            <HomeOutlined />
                        </template>
                        返回首页
                    </a-button>

                    <a-button @click="goBack" size="large">
                        <template #icon>
                            <ArrowLeftOutlined />
                        </template>
                        返回上页
                    </a-button>
                </a-space>
            </template>
        </a-result>

        <div class="suggestions">
            <h3>可能的原因：</h3>
            <ul>
                <li>页面地址输入错误</li>
                <li>页面已被删除或移动</li>
                <li>链接已过期</li>
            </ul>

            <div class="quick-links">
                <h3>快速导航：</h3>
                <a-space>
                    <a-button type="link" @click="navigateTo('/')">首页</a-button>
                    <a-button type="link" @click="navigateTo('/login')">登录</a-button>
                    <a-button type="link" @click="navigateTo('/register')">注册</a-button>
                </a-space>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { HomeOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue'

// 获取当前路由信息
const route = useRoute()
const router = useRouter()

// 获取当前访问的路径
const currentPath = computed(() => route.path)

// 返回首页
const goHome = () => {
    navigateTo('/')
}

// 返回上一页
const goBack = () => {
    if (window.history.length > 1) {
        router.back()
    } else {
        // 如果没有历史记录，则跳转到首页
        navigateTo('/')
    }
}

// 设置页面元信息
useHead({
    title: '页面未找到 - 404',
    meta: [
        { name: 'description', content: '您访问的页面不存在' },
        { name: 'robots', content: 'noindex' } // 防止搜索引擎索引404页面
    ]
})
</script>
  
<style scoped>
.not-found-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #e6cdfd 0%, #c3cfe2 100%);
    padding: 40px 20px;
    text-align: center;
    /* 确保所有文本内容居中 */
}

.suggestions {
    max-width: 500px;
    margin-top: 40px;
    padding: 24px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* 确保suggestions内部内容居中 */
}

.suggestions h3 {
    color: #1890ff;
    margin-bottom: 16px;
}

.suggestions ul {
    display: inline-block;
    /* 使列表能够居中 */
    text-align: left;
    /* 列表项内部文字左对齐 */
    padding-left: 0;
    margin-bottom: 24px;
}

.suggestions li {
    margin-bottom: 8px;
    color: #666;
    list-style-position: inside;
    /* 确保项目符号在列表项内部 */
}

.quick-links h3 {
    margin-bottom: 12px;
}

.quick-links .ant-space {
    justify-content: center;
    /* 快速链接按钮居中 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .not-found-container {
        padding: 20px 10px;
    }

    .suggestions {
        margin-top: 20px;
        padding: 16px;
        max-width: 100%;
    }

    .suggestions ul {
        display: block;
        /* 在小屏幕上使用块级显示 */
        text-align: center;
        /* 小屏幕上列表项也居中 */
    }

    .suggestions li {
        text-align: center;
        /* 小屏幕上列表项文字居中 */
    }
}</style>